{extend name="index_layout"/}
{block name="main"}
<form class="layui-form" method="post">
    <div class="layui-form-item">
        <label class="layui-form-label">等级</label>
        <div class="layui-input-block">
            <input id="c-level" lay-verify="required" class=" layui-input" placeholder="数字越大等级越高" name="row[level]" type="text">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">标签</label>
        <div class="layui-input-block">
            <input id="c-tag" lay-verify="required" class="form-tags layui-input" name="row[tag]" type="text">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-block">
            <input id="c-price" lay-verify="required" class=" layui-input" step="0.01" name="row[price]" type="number">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">特殊省份价格</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-normal" id="add-price">添加价格</button>
            <table class="layui-table" id="price-table">
                <thead>
                <tr>
                    <th>省份</th>
                    <th>价格</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">查看客源条数</label>
        <div class="layui-input-block">
            <input id="c-nums" lay-verify="required" class=" layui-input" name="row[nums]" type="number">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权益</label>
        <div class="layui-input-block">
            <input id="c-desc" lay-verify="required" class=" layui-input" name="row[desc]" type="text">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <textarea id="c-content" class="editor layui-textarea" rows="5" name="row[content]" cols="50"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">保证金退还规则</label>
        <div class="layui-input-block">
            <textarea id="c-bondContent" class="editor layui-textarea" rows="5" name="row[bondContent]" cols="50"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="radio" name="row[status]" value="1" title="显示" checked>
            <input type="radio" name="row[status]" value="0" title="隐藏">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
            <input id="c-sort" lay-verify="required" class=" layui-input" name="row[sort]" type="number">
        </div>
    </div>
    <div class="layui-form-item layer-footer">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
{/block}
{block name="script"}

<script type="text/javascript">
    $(document).ready(function(){
        // 添加价格按钮点击事件
        $("#add-price").click(function(){
            var newRow = '<tr>' +
                '<td><select class="province-dropdown" multiple name="province[]"></select></td>' +
                '<td><input type="text" class="layui-input price-input" name="price[]"></td>' +
                '<td><button type="button" class="layui-btn layui-btn-danger delete-row">删除</button></td>' +
                '</tr>';
            // 添加新行
            $("#price-table tbody").append(newRow);

            // 请求省份数据
            $.ajax({
                url: '/admin/area/getList',
                method: 'GET',
                success: function(data) {
                    // 将省份数据添加到多选下拉框中
                    var selectOptions = '';
                    data.forEach(function(province){
                        selectOptions += '<option value="' + province.shortname + '">' + province.shortname + '</option>';
                    });
                    // 将选项添加到最新添加的多选下拉框中
                    $('.province-dropdown:last').html(selectOptions);
                    // 使用 layui 的 select 组件渲染多选下拉框
                    layui.use('form', function(){
                        var form = layui.form;
                        form.render('select');
                    });
                },
                error: function(xhr, status, error) {
                    console.error('Failed to fetch province data:', error);
                }
            });
        });

        // 删除按钮点击事件
        $(document).on('click', '.delete-row', function(){
            $(this).closest('tr').remove();
        });
    });</script>



<script type="text/javascript">
layui.use('yznForm', function() {
    var yznForm = layui.yznForm;
    yznForm.bindevent($("form.layui-form"));
});
</script>
{/block}